<template>
  <!--绑定手机号-->
  <div class="text-xl flex">
    <div v-if="!changePhoneNum">
      {{ phoneNum }}
    </div>
    <el-button v-if="!changePhoneNum" text @click="changePhoneNum = true">修改</el-button>
    <el-form v-if="changePhoneNum" :inline="true" :model="changePhoneNumForm">
      <el-form-item class="w-50 block">
        <el-input v-model="changePhoneNumForm.mobile" placeholder="请输入新手机号" />
      </el-form-item>
      <el-form-item class="w-50">
        <el-input v-model="changePhoneNumForm.captcha" placeholder="验证码">
          <template #append>
            <el-button v-if="countDown===61 || countDown===0" @click="getCaptcha">
              {{ $t("common.reg.getCaptcha") }}
            </el-button>
            <el-button v-else disabled>{{ countDown }}</el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="bg-green-500" type="success" @click="onSubmit">提交修改</el-button>
        <el-button class="bg-green-500" type="success" @click="changePhoneNum = false">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { captcha, changePhoneNumApi } from "@/utils/api/register";
import { reactive, ref } from "vue";

const changePhoneNum = ref(false);
const countDown = ref(61);


defineProps({
  phoneNum: String,
  useEncryption: Boolean
});

function countdown() {
  countDown.value--;
  var timer = setInterval(function() {
    countDown.value--; // 每次执行时，将倒计时的值减1
    if (countDown.value === 0) {
      clearInterval(timer); // 如果倒计时结束，清除定时器
      countDown.value = 61;
    }
  }, 1000); // 每隔1秒执行一次
}

const changePhoneNumForm = reactive({
  mobile: "",
  captcha: "",
  captcha_id: ""
});

const getCaptcha = () => {
  countdown();
  captcha(changePhoneNumForm.mobile).then((res: any) => {
    changePhoneNumForm.captcha_id = res.data.uuid;
  });
};


const onSubmit = () => {
  changePhoneNumApi(changePhoneNumForm.mobile, changePhoneNumForm.captcha, changePhoneNumForm.captcha_id).then((res: any) => {
    console.log(res);
  });
};

</script>

<style scoped>

</style>
